<template>
  <div>
    <!-- 动态组件 & 缓存组件 & 异步组件 -->
    <button @click="currentComp = 'Home'">Home2</button>
    <button @click="currentComp = 'Posts'">Posts2</button>

    <!-- <component :is="currentComp"/> -->
    
    <!-- 
      有缓存
      include: 指定只缓存哪些名称的组件
      exclude: 不绑在哪些名称的组件
     -->
     <keep-alive exclude="Home">
      <component :is="currentComp"/>
     </keep-alive>
   <!-- 
     路由懒加载: component: () => import('xxx.vue')  ==> 项目优化
        import xxx from 'xxx.vue' // 静态引入
       1. import()动态引入组件: 将组件拆分(单独)打包
       2. 路由组件的配置是一个函数: 函数开始不执行 ==> 默认不加载组件的打包文件 
        ==>第一次访问组件的路由路径时才请求加载打包文件   ==> 这就是懒加载的效果
    -->

    <button @click="loadModule">动态加载一个模块</button>
  </div>
</template>

<script type="text/ecmascript-6">

    // import {sum} from './math' // 引入特定的
    // import xxx from './math'  // 简写   引入default
    // import {default as yyy} from './math' // 原始写法   引入default
    // import * as math from './math' // 引入全部

  // 静态import ==> 被引入的模块会打包到一起
  // import Home from './components/Home'
  // import Posts from './components/Posts'

  /* 
  动态import
  import(modulePath): 被引入的模块会被单独打包(code split)   es2017的新语法
  () => import(modulePath): 配置的组件, 函数开始不调用, 当第一次访问对应的路由路径时才会执行 ==> 请求加载打包文件
  import()返回promise, promise成功的结果就是整体模块对象
  本质上: 可以利用import()实现对任意模块的懒加载
  */
  const Home = () => import('./components/Home')
  const Posts = () => import('./components/Posts')

  export default {
    name: 'DynamicCacheAsync',

    data () {
      return {
        currentComp: 'Posts' // 初始要显示的动态组件的名称(组件标签名)
      }
    },

    methods: {
      loadModule () {
        import('./math3').then((module) => {
          console.log(module.sum(1, 2))
          console.log(module.default(1, 2))
        })
      }
    },

    components: {
      Home,
      Posts
    }
  }
</script>
